<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .box {
            height: 500px;
            background-color: #027DB4;
            color: #FFF;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .box2 {
            width: 30%;
            height: 500px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: flex-end;
            margin-right: 40px;
        }

        .box2 h1 {
            font-size: 50px;
        }

        .box2 h3 {
            font-size: 35px;
        }

        .box3 {
            width: 30%;
            height: 400px;
            background: #ffffff6e;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        .head_foot_box {
            height: 80px;
            size: 20px;
        }
        .box3 button{

        }
    </style>
    <title>登录页</title>
</head>

<body>
<div class="head_foot_box"></div>
<form action="LoginServlet" method="post">
<div class="box">
    <div class="box2">
        <h1>湖南大众传媒</h1>
        <h3>选课系统</h3>
    </div>
    <div class="box3">
        <h2>用户登录</h2>
        <input type="text"   name="user_id" placeholder="请输入用户编号" maxlength="11" size="40px"
               style="width:250px; height:40px; border: 1px solid #139be1; font-size: 16px;" /><br />
        <input type="text" name="password" placeholder="请输入密码" maxlength="11" size="40px"
               style="width:250px; height:40px; border: 1px solid #139be1; font-size: 16px;" /><br />
        <select name="role" required style="width:255px; height:40px; border: 1px solid #139be1; font-size: 16px;">
            <option value="student">学生</option>
            <option value="teacher">老师</option>
            <option value="admin">管理员</option>
        </select>
        <br />
        <button type="submit">登录</button>
    </div>
</div>
</form>
<div class="head_foot_box"> <br />
    <p align="center">hunandazhong@湖南大众</p>
    <p align="center">地址：湖南大众传媒职业技术学院</p>
</div>

</body>

</html>
